// 定义低代码平台相关数据
import { h, ref } from 'vue'

// 主容器
const container = {
    name: 'container',
    style: {
        height: '500px',
        width: '700px',
        zIndex: 999,
    }
}



// 组件列表
class ToolList {
    list = []
    renderList = []
    constructor() {
        this.list = []
        this.renderList = []
    }
    register(tool) {
        this.list.push(tool)
    }
}

import { ElButton, ElInput } from 'element-plus'

let toollist = new ToolList()

toollist.register({
    key: 'button',
    label: '按钮',
    style: {
        top: '0px',
        left: '0px',
        width: '100px',
        height: '50px',
    },
    preview: h(ElButton, { type: 'primary' }, () => '按钮预览'),
    component: h(ElButton, { type: 'primary', style: { width: '100%', height: '100%' } }, () => '按钮')
})
toollist.register({
    key: 'input',
    label: '输入框',
    style: {
        top: '10px',
        left: '10px',
        width: '100px',
        height: '50px',
    },
    field: 'field',
    value: '默认值',
    preview: h(ElInput, { type: 'defualt', placeholder: '输入框预览' }),
    component: h(ElInput, { type: 'defualt', style: { width: '100%', height: '100%' }, placeholder: '请输入内容' })
})

let renderData = JSON.parse(localStorage.getItem('renderList') || '[]')
// 组件经过字符串化后失效，需要重新赋值组件
renderData.forEach(item => {
    toollist.list.forEach(tool => {
        if(tool.key === item.key){
            item.component = tool.component
        }
    })
})
toollist.renderList = renderData

export { container, toollist }